<template>
  <div class="sea-table-header">
    <el-row>
      <el-form ref="form" v-model="params" :inline="true" @submit.native.prevent="submit">

        <!-- 允许设置一个标题-->
        <slot name="input" :submit="submit"></slot>

        <el-form-item v-if="!hiddenButton">
            <el-button size="small" type="primary" @click="submit" :loading="loading">查询</el-button>
            <el-button size="small" @click="reset" :loading="loading">重置</el-button>
            <!-- 其它按钮组-->
            <slot name="buttons"></slot>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
/* eslint-disable */

/**
 * el-form 兼容表头
 *
 * 极简风格的表头
 */
export default {
    name: "SeaSimpleHeader"
    , components: {}
    // 通过 inject，直接获取 dataTable 对象实例
    , inject: ['dataTable']
    , props: {
        // 请求参数
        params: {type: Object, default: undefined}
        // 数据格式化函数
        , formatter: {type: Function, default: undefined}
        // 隐藏提交按钮
        , hiddenButton: {type: Boolean, default: true}
    }
    , data() {
        return {
            // 默认值
            defaultValue: {}
        }
    }
    , computed: {
        loading: function () {
            return this.dataTable.loading;
        }
    }
    , mounted() {
        // 记录表单初始值
        Layers.copy(this.params, this.defaultValue);
    }
    , methods: {
        /**
         * 面板全屏展示
         */
        fullscreen: function () {
            this.dataTable.fullscreen();
        }
        /**
         * 提交表单
         */
        , submit: function () {
            let params = this.serialize();
            params.keyword = this.keyword;
            this.dataTable.handlerParams(params);
        }
        /**
         * 重置表单
         *
         * 恢复初始状态，并处罚提交事件
         */
        , reset: function () {
            Layers.copy(this.defaultValue, this.params);
            this.submit();
        }
        /**
         *
         * 序列化表单
         */
        , serialize: function () {
            if (this.disabledForm) {
                return {};
            } else {
                if (Layers.isNotBlank(this.formatter)) {
                    // 采用用户指定的序列化函数
                    return this.formatter(this.params);
                } else {
                    // 使用通用的序列化函数
                    return Layers.serialize(this.params);
                }
            }
        }
    }
}
</script>
